<template>
  <div>
    <el-table v-loading="loading" :data="dataSource" :height="autoHeight" border stripe>
      <el-table-column label="操作" align="center" width="130px">
        <div slot="header">
          <el-button type="primary" @click="visible = true" icon="el-icon-circle-plus-outline"></el-button>
        </div>
        <div slot-scope="scope">
          <el-button type="success" icon="el-icon-edit" circle @click="editAttr(scope.row)" title="编辑"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle @click="removeData(scope.row, scope.$index)" title="删除"></el-button>
        </div>
      </el-table-column>
      <el-table-column prop="attributeKey" label="KEY" align="center" width="250px">
        <template slot="header" slot-scope="scope">
          <div>{{ scope.column.label }}</div>
          <el-input v-model="filterModel[scope.column.property]" :placeholder="scope.column.label + '过滤'" clearable @change="filterChange(scope.column.property)"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="attributeName" label="名称" align="center" width="250px">
        <template slot="header" slot-scope="scope">
          <div>{{ scope.column.label }}</div>
          <el-input v-model="filterModel[scope.column.property]" :placeholder="scope.column.label + '过滤'" clearable @change="filterChange(scope.column.property)"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="attributeValue" label="内容" align="center">
        <template slot="header" slot-scope="scope">
          <div>{{ scope.column.label }}</div>
          <el-input v-model="filterModel[scope.column.property]" :placeholder="scope.column.label + '过滤'" clearable @change="filterChange(scope.column.property)"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="updateAt" label="更新日期" align="center" width="150px"> </el-table-column>
      <el-table-column prop="updateByName" label="更新人" align="center" width="120px"> </el-table-column>
    </el-table>
    <div class="lab-table-page">
      <div style="display: inline-flex">
        <el-pagination
            :disabled="loading"
            :current-page="pageInfo.page"
            :page-sizes="[5, 10, 15, 20, 50, 100]"
            :page-size="pageInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageInfo.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
        <el-button-group style="padding: 2px 5px">
          <el-button icon="el-icon-refresh" title="刷新" :disabled="loading" @click="loadSource([])" />
        </el-button-group>
      </div>

      <el-dialog title="属性配置" :visible.sync="visible">
        <el-form label-width="80px" label-position="left">
          <el-form-item label="属性">
            <el-select :disabled="!$Util.isEmpty(entityInfo.attributeId)" v-model="entityInfo.attributeKey" style="width: 100%" placeholder="选择属性" @change="keyChange">
              <el-option v-for="item in allEnums" :key="item.value" :value="item.value" :label="item.label" />
            </el-select>
          </el-form-item>
          <el-form-item label="内容">
            <lab-code ref="jsonRef" v-if="entityInfo.attributeType === 'json'" :config="{ language: entityInfo.attributeType }" v-model="entityInfo.attributeValue"></lab-code>
            <el-input v-else type="textarea" :rows="8" v-model="entityInfo.attributeValue"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-circle-check" type="success" @click="saveUpdate(entityInfo)">{{ entityInfo.attributeId ? '更新' : '保存' }}</el-button>
            <el-button icon="el-icon-circle-close" type="info" @click="visible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import IdeaTable from "@/mixins/IdeaTable";
import LabCode from "@/components/lab-code/LabCode";

export default {
  name: "AttributeTable",
  components: {LabCode},
  mixins: [IdeaTable],
  computed:{
    autoHeight() {
      return this.select ? `300px` : `calc(100vh - 130px)`
    }
  },
  data () {
    return {
      allEnums: []
    }
  },
  created() {
    this.queryUrl = `attribute/queryPage`
    this.removeUrl = `attribute/remove/`
    this.saveUrl = `attribute/save`
    this.rowKey = 'attributeId'
    this.pageInfo.pageSize = 20
    this.loadEnum()
    this.loadSource()
  },
  methods: {
    loadEnum() {
      this.$get('/attribute/enums')
          .then(res => {
            this.allEnums = res.data
          })
    },
    editAttr(row) {
      this.entityInfo = this.$Util.copy(row);
      this.keyChange()
      this.visible=true
    },
    keyChange() {
      const { attributeKey, attributeValue } = this.entityInfo
      const selectEnum = this.allEnums.find(item => item.value === attributeKey)
      if (selectEnum) {
        this.$set(this.entityInfo,'attributeType', selectEnum.type)
        const value = attributeValue || selectEnum.defaultValue
        this.$set(this.entityInfo,'attributeValue', value)
        this.$set(this.entityInfo,'attributeName', selectEnum.label)
        if (selectEnum.type === 'json' && this.$refs.jsonRef) {
          this.$refs.jsonRef.setValue(value)
        }
        this.$set(this.entityInfo, 'attributeEnum', selectEnum)
      }
    },
    saveUpdate() {
      const { attributeEnum } = this.entityInfo
      const saveObj = this.$Util.copy(this.entityInfo)
      if (attributeEnum && attributeEnum.type === 'json' && this.$refs.jsonRef) {
        saveObj.attributeValue = this.$refs.jsonRef.getValue()
      }
      this.saveData(saveObj)
    }
  }
}
</script>

<style scoped>

</style>
